<template>
    <div>
        <Header></Header>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://yanxuan.nosdn.127.net/7798fe1f145b3bb756f5b3e6b8945dda.jpg?quality=95&thumbnail=1920x420&imageView">
                </div>
                <div class="swiper-slide"><img
                        src="https://yanxuan.nosdn.127.net/c4249f020735e0af4d8a5e6b3d0e9ea0.jpg?quality=95&thumbnail=1920x420&imageView">
                </div>
                <div class="swiper-slide"><img
                        src="https://yanxuan.nosdn.127.net/55ec871808ce4fb40bf435d1cf1e9ce4.jpg?quality=95&thumbnail=1920x420&imageView">
                </div>
            </div>

            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

        </div>
        <section>
            <div class="mdui-container brand">
                <div class="mdui-row secion-header">
                    <div class="mdui-col-lg-2">
                        <h1>品牌制造商</h1>
                    </div>
                    <div class="mdui-col-lg-8">
                        <span>工厂直到消费者</span>
                    </div>
                    <div class="mdui-col-lg-2 mdui-text-right">
                        <span>更多制造商>></span>
                    </div>
                </div>
                <div class="mdui-row">
                    <div class="mdui-col-lg-4">
                        <div class="mask mask-one"></div>
                        <div class="name">
                            <div class="title">小凤凤制造</div>
                            <div class="price">25元起</div>
                        </div>
                    </div>
                    <div class="mdui-col-lg-4">
                        <div class="mask mask-two"></div>
                        <div class="name">
                            <div class="title">喜洋洋监制</div>
                            <div class="price">80元起</div>
                        </div>
                    </div>
                    <div class="mdui-col-lg-4">
                        <div class="mask mask-three">
                            <div class="mdui-row manufacturer small-fist"></div>
                            <div class="mdui-row manufacturer small-last"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="mdui-container new_products">
                <div class="mdui-row secion-header">
                    <div class="mdui-col-lg-2">
                        <h1>新品首发</h1>
                    </div>
                    <div class="mdui-col-lg-8">
                        <span>为你寻觅世间好宠</span>
                    </div>
                    <div class="mdui-col-lg-2 mdui-text-right">
                        <span>更多新品>></span>
                    </div>
                </div>
                <div class="product">
                    <div class="mdui-row">
                        <div class="mdui-col-lg-3">
                            <div class="mdui-hoverable card ">
                                <div class="mdui-text-center img">
                                    <img src="https://yanxuan.nosdn.127.net/a7c361906bb3cd0c9f3e8be13745e893.jpg?quality=95&thumbnail=265x265&imageView">
                                </div>
                                <div class="title">
                                    蜘蛛侠 蛛网印花 短袖T恤 漫威
                                </div>
                                <div class="price">
                                    ￥188
                                </div>
                            </div>
                        </div>
                        <div class="mdui-col-lg-3">
                            <div class="mdui-hoverable card ">
                                <div class="mdui-text-center img">
                                    <img src="https://yanxuan.nosdn.127.net/edac0706ab1052cb47e34c591c568a3b.png?quality=95&thumbnail=265x265&imageView">
                                </div>
                                <div class="title">
                                    网易智造3D可逆循环扇
                                </div>
                                <div class="price">
                                    ￥499
                                </div>
                            </div>
                        </div>
                        <div class="mdui-col-lg-3">
                            <div class="mdui-hoverable card ">
                                <div class="mdui-text-center img">
                                    <img src="https://yanxuan.nosdn.127.net/e0fcd63d29618685f2690e4e47719b4e.png?quality=95&thumbnail=265x265&imageView">
                                </div>
                                <div class="title">
                                    女式浪漫散摆修身连衣裙
                                </div>
                                <div class="price">
                                    ￥250
                                </div>
                            </div>
                        </div>
                        <div class="mdui-col-lg-3">
                            <div class="mdui-hoverable card ">
                                <div class="mdui-text-center img">
                                    <img src="https://yanxuan.nosdn.127.net/802cbd74b3578b1c6fec3868cf0504f8.png?quality=95&thumbnail=265x265&imageView">
                                </div>
                                <div class="title">
                                    男式升级版无缝休闲运动T恤
                                </div>
                                <div class="price">
                                    ￥199
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <Footer></Footer>
    </div>
</template>

<script>
    import Header from '../components/Header'
    import Footer from '../components/Footer'

    export default {
        name: 'home',
        components: {Header, Footer},
        mounted() {
            this.mySwiper();
        },
        methods: {
            mySwiper() {
                new Swiper('.swiper-container', {
                    direction: 'horizontal',
                    loop: true,
                    autoplay: true,

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                })
            },
        }
    }
</script>

<style scoped>
    .swiper-container {
        width: 100%;
        height: 420px;
        margin-bottom: 20px;
    }

    .secion-header {
        height: 75px;
        display: flex;
        align-items: baseline;
    }

    .brand {
        margin-bottom: 20px;
    }

    .brand .mask {
        height: 320px;
        width: 98%;
    }

    .brand .mask-one {
        background-image: url("https://yanxuan.nosdn.127.net/e260e624a26f7d775f9012133a5c1562.png");
        background-position: center;
    }

    .brand .mask-two {
        background-image: url("https://yanxuan.nosdn.127.net/f502781da6a6ea0934882ca5bc0cffcc.png");
        background-position: center;
    }

    .brand .small-fist, .small-last {
        height: 155px;
    }

    .brand .small-fist {
        background-image: url("https://yanxuan.nosdn.127.net/b8c80f798cd0342e4fe2b5b8daa7aeff.png");
        margin-bottom: 10px;
        /*background-repeat: no-repeat;*/
        /*background-position: right;*/
    }

    .brand .small-last {
        background-image: url("https://yanxuan.nosdn.127.net/9704200f758d804b2253e79ca89c4584.jpg");
    }

    .brand .name {
        margin-top: -280px;
        text-align: center;
        color: #666;
    }

    .brand .title {
        font-size: 30px;
    }

    .brand .price {
        display: inline-block;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #666666;
    }

    .new_products .card {
        width: 100%;
        padding-bottom: 20px;
    }

    .new_products .title, .price {
        text-align: center;
    }

    .new_products .title {
        font-weight: bold;
    }

    .new_products .price {
        padding-top: 10px;
        color: red;
    }
</style>
